<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background-color: #fff;
        }

        .hb-cover {
            z-index: 10;
            position: relative;
            width: 180px;
            height: 239px;
            border-radius: 5px;
            overflow: hidden;
            margin: 20px auto 0 auto;
        }

        .bg-blue {
            background-color: #5AC2FF;
            overflow: hidden;
        }

        .hb-cover .black-opacity {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .hb-cover .icon-play {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 44px;
            height: 44px;
        }

        .text-white {
            position: absolute;
            left: 0;
            top: 152px;
            width: 100%;
            font-size: 14px;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 20px;
            text-align: center;
        }

        .box-white {
            background-color: #fff;
            border-radius: 20px 20px 0 0;
            padding-top: 60px;
            margin-top: -50px;
        }

        .hb-title {
            position: relative;
            font-size: 18px;
            font-weight: 500;
            color: #222224;
            line-height: 25px;
            text-align: center;
            word-break: keep-all;
            word-wrap: break-word;
            -webkit-hyphens: none;
        }

        .icon-collect {
            position: absolute;
            right: 15px;
            top: 0;
            width: 24px;
            height: 24px;
        }

        .other-title {
            font-size: 16px;
            font-weight: 500;
            color: #191919;
        }

        .other-count {
            font-size: 14px;
            font-weight: 400;
            color: #808080;
        }

        .other-count::after {
            content: "";
            display: inline-block;
            width: 13px;
            height: 13px;
            background-image: url("../../image/ui/ar_gray.png");
            background-size: 100% 100%;
            vertical-align: middle;
            margin-left: 3px;
        }

        .box-p15 {
            padding: 15px;
        }

        .hb-list {
            overflow-x: scroll;
            padding-left: 15px;
        }

        .hb-list .item {
            margin-right: 10px;
            width: 120px;
            min-width: 120px;
            border-radius: 5px;
        }

        .hb-list .cover {
            display: block;
            width: 100%;
            height: 158px;
            margin-bottom: 11px;
        }

        .title {
            font-size: 14px;
            font-weight: 400;
            color: #222224;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-break: keep-all;
            word-wrap: break-word;
            -webkit-hyphens: none;
        }

        .tips {
            font-size: 12px;
            font-weight: 400;
            color: #BFBFBF;
            text-align: center;
        }

        .fixed-box {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 60px;
            padding: 10px 15px;
            background-color: #fff;
        }

        .btn-activation {
            height: 100%;
            height: 100%;
            background: #FD9B43;
            border-radius: 20px;
            font-size: 15px;
            font-weight: 500;
            color: #FFFFFF;
        }

        .score-list {
            position: relative;
            margin: 40px 15px 15px 20px;
            padding: 40px 15px 0 15px;
            box-shadow: 0px 2px 24px 0px rgba(33, 36, 40, 0.06);
            border-radius: 10px;
            overflow: visible;
        }

        .score-list .avatar {
            position: absolute;
            left: 15px;
            top: -16px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
        }

        .score-list .name {
            position: absolute;
            left: 86px;
            top: 10px;
            font-size: 14px;
            font-weight: 500;
            color: #222224;
            line-height: 20px;
        }

        .score-list .item {
            height: 55px;
            border-bottom: 1px solid #EFEFEF;
        }

        .score-list .item:last-child {
            border-bottom: 0;
        }

        .score-list .text-black {
            font-size: 14px;
            font-weight: 400;
            color: #222224;
            line-height: 20px;
        }

        .score-list .text-orange {
            font-size: 16px;
            font-weight: 500;
            color: #FD9B43;
        }

        .score-list .text-gray {
            font-size: 12px;
            font-weight: 400;
            color: #BFBFBF;
            padding-right: 5px;
            text-align: right;
        }

        .score-list .icon-arrow {
            width: 15px;
            min-width: 15px;
            height: 15px;
        }

        .tips {
            text-align: center;
            color: #BFBFBF;
            font-size: 14px;
            line-height: 40px;
        }

        .fwb-title {
            padding: 0 15px;
            margin-top: 20px;
            font-size: 16px;
            font-weight: 400;
            color: #222224;
        }

        .fwb {
            padding: 0 15px;
            margin-top: 10px;
            overflow: hidden;
        }

        .fwb * {
            white-space: pre-wrap;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="bg-blue">
            <div class="hb-cover" @click="handleItem(prev)">
                <img width="100%" height="100%"
                    :src="info.pbookPic"
                    alt="">
                <div class="black-opacity"></div>
                <img src="../../image/ui/play_4.png" alt="" class="icon-play">
                <div class="text-white" v-show="info.isActivate == 0">试看绘本</div>
            </div>
        </div>
        <div class="box-white">
            <div class="hb-title">
                {{ info.pbookName }}
                <!-- <img v-show="isCollect" @click="isCollect = false" src="../../image/ui/collect_hb.png" alt="" class="icon-collect">
                <img v-show="!isCollect" @click="isCollect = true" src="../../image/ui/uncollect.png" alt="" class="icon-collect"> -->
            </div>
            <div class="tips" v-show="info.isActivate == 1">绘本有效期至:{{formatTime(info.endDate, 'date')}}</div>
            <div class="box-p15" data-flex="cross:center main:justify">
                <div class="other-title">选集</div>
                <div class="other-count" @click="openMoreFrm">{{info.anthologyNum}}套</div>
            </div>
            <div class="hb-list" data-flex>
                <div class="item" v-for="item,index in info.listData" @click="handleItem(index)">
                    <img :src="item.pbookPic"
                        alt="" class="cover">
                    <div class="title">{{item.pbookName}}</div>
                </div>
                <div style="min-width: 5px;"></div>
            </div>
            <div class="fixed-box" v-show="info.isActivate == 0">
                <div class="btn-activation" data-flex="cross:center main:center" onclick="openActivationFrm()">激活绘本</div>
            </div>
            <div class="score-list" v-show="info.isActivate == 1">
                <img :src="history.appUserAvatar" alt="" class="avatar">
                <div class="name">{{history.appUserName}}的学习记录</div>
                <div class="item" v-for="item in history.listData" data-flex="cross:center" @click="clickOfScore(item)">
                    <div class="text-black">
                        {{item.questionTypeName}}
                    </div>
                    <div class="text-orange" style="text-align: right;padding-right: 10px;" data-flex-box="1">{{item.scoreValue||0}}分</div>
                    <img src="../../image/ui/ar_gray.png" alt="" class="icon-arrow">
                </div>
                <div v-if="history.listData.length == 0" class="tips">
                    您还没有提交过记录
                </div>
            </div>
            <div class="fwb-title" v-if="info.pbookDetail">绘本介绍</div>
            <div class="fwb" v-if="info.pbookDetail">
                <div v-html="info.pbookDetail"></div>
            </div>
            <div style="height: 60px;"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
        // 扫码成功后执行
        api.addEventListener({
            name: 'scanCourseCode'
        }, function (ret) {
            fnSubmit(ret.value.code);
        });
        // 做完一个绘本
        api.addEventListener({
            name: 'hbSubmitOne'
        }, function() {
            getData();
        })
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                hbId: pageParam.hbId,
                info: {},
                history: {
                    listData: []
                },
                prev: 0
            }
        });
        getData();
    }

    function getData() {
        var params = {
            id: vm.hbId
        };
        var url = 'stuPicture/findStuPictureBookDetail';
        var callback = function(data) {
            vm.info = data;
            if(data.isActivate == 1) {
                getHistoryData();
            }
        };
        POST(url, params, callback);
    }

    // 点击更多
    function openMoreFrm() {
        fnOpenFrame({
            name: 'more_frm',
            url: './more_frm.html',
            rect: {
                x: 0, y: 0, w: 'auto', h: 'auto'
            },
            bgColor: 'rgba(0,0,0,0.5)',
            pageParam: {
                info: vm.info,
                hbId: vm.hbId
            }
        });
    }

    function clickOfScore(item) {
        var title = "";
        var code = 0;
        if(item.questionTypeName == "跟读") {
            title = "跟读得分";
            code = 52;
        } else if(item.questionTypeName == "单词") {
            title = "单词得分";
            code = 53;
        } else if(item.questionTypeName == "阅读理解") {
            title = "阅读理解得分";
            code = 54;
        }
        fnOpenPublicWin(title, "video/hb_score", {
            code: code,
            id: vm.hbId
        });
    }

    // 点击绘本
    function handleItem(index) {
        var item = vm.info.listData[index];
        // 如果没做过
        if(typeof item.scoreValue == 'null' || typeof item.scoreValue == 'undefined' || item.scoreValue == '') {

            var params = {
                isBtn: false,
                btnName: '练习题',
                headerFn: 'headerFn',
                catalogId: item.catalogId,
                itemId: item.id,
                index: index,
                hbId: vm.hbId,
                info: vm.info,
                isConfigQuestion: item.isConfigQuestion,
                isActivate: vm.info.isActivate
            };
            fnOpenPublicWin(item.pbookName, 'video/hb_start', params);
        } else {
            fnOpenWin({
                name: 'hb_end_win',
                url: './hb_end.html',
                pageParam: {
                    info: vm.info,
                    score: item.scoreValue,
                    index: index,
                    hbId: vm.hbId
                }
            });
        }
    }

    // 点击激活
    function openActivationFrm() {
        fnOpenFrame({
            name: 'activation_frm',
            url: './activation_frm.html',
            rect: {
                x: 0, y: 0, w: 'auto', h: 'auto'
            },
            bgColor: 'rgba(0,0,0,0.5)',
            pageParam: {
                hbId: vm.hbId,
                winName: api.winName,
                frameName: api.frameName,
                pmsProductId: vm.info.pmsProductId
            }
        });
    }

    // 激活回调
    function fnSubmit(content) {
        var params = {
            id: vm.hbId,
            materialSequenceNum: content
        };
        var url = 'stuPicture/unlockStuPictureBookBySeqNum';
        var callback = function(data) {
            fnToast('激活成功');
            activationSuccess(data.endDate);
        };
        POST(url, params, callback);
    }

    // 激活成功
    function activationSuccess(endDate) {
        vm.info.isActivate = 1;
        vm.info.endDate = endDate;
    }

    // 获取套集学习记录
    function getHistoryData() {
        var params = {
            id: vm.hbId
        };
        var url = 'stuPicture/findPictureBookPageStudentRecords';
        var callback = function(data) {
            vm.history = data;
        };
        POST(url, params, callback);
    }
</script>

</html>